<template>
  <div class="TaskManagement">
    <el-card>
      <!-- <div>
                    <el-button class="btn" icon="el-icon-search" size="small"
          >查询搜索</el-button
        >
        </div> -->
      <h3><span class="tag"></span> 任务管理</h3>
      <div class="searchBox">
        <div class="left">
          <span class="txt">任务名称：</span>
          <el-input v-model="title" clearable size="small"></el-input>
          <el-button
            class="btn"
            icon="el-icon-search"
            size="small"
            @click="search"
            >查询搜索</el-button
          >
        </div>
        <el-button class="btn" icon="el-icon-plus" size="small" @click="add"
          >新增任务</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        border
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="name" label="任务名称"> </el-table-column>
        <el-table-column prop="roleType" label="角色">
          <template slot-scope="scope">
            {{ scope.row.roleType == 1 ? "普通用户" : "主播" }}
          </template>
        </el-table-column>
        <el-table-column prop="rewardType" label="任务奖励">
          <template slot-scope="scope">
            {{ scope.row.rewardType == 1 ? "钻石" : "叶子" }}
          </template>
        </el-table-column>
        <el-table-column prop="rewardNum" label="奖励个数"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ccc"
              active-value="1"
              inactive-value="5"
              @change="
                (value) => {
                  statusChange(scope.row.id, value);
                }
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="任务类型">
          <template slot-scope="scope">
            {{ scope.row.type | type }}
          </template>
        </el-table-column>
        <el-table-column prop="termNum" label="任务完成条件"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="jumpAndroid" label="安卓跳转"></el-table-column>
        <el-table-column prop="jumpIos" label="IOS跳转"></el-table-column>
        <el-table-column prop="type" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="info"
              size="small"
              plain
              @click="del(scope.row.id, '10')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="show" width="30%" center>
      <el-form label-position="right" label-width="100px" :model="form">
        <el-form-item label="任务名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#cccccc"
            active-value="1"
            inactive-value="5"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="适用角色">
          <el-radio v-model="form.role_type" label="1">用户</el-radio>
          <el-radio v-model="form.role_type" label="5">主播</el-radio>
        </el-form-item>
        <el-form-item label="安卓跳转">
          <el-input v-model="form.jump_android"></el-input>
        </el-form-item>
        <el-form-item label="IOS跳转">
          <el-input v-model="form.jump_ios"></el-input>
        </el-form-item>
        <el-form-item label="选择任务">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="完成条件数">
          <el-input v-model="form.term_num"></el-input>
        </el-form-item>
        <el-form-item label="任务奖励">
          <el-radio v-model="form.reward_type" label="1">钻石</el-radio>
          <el-radio v-model="form.reward_type" label="5">叶子</el-radio>
        </el-form-item>
        <el-form-item label="奖励数量">
          <el-input v-model="form.reward_num"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="show = false">取 消</el-button>
        <el-button size="small" class="btn" type="primary" @click="submitAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  taskList,
  taskAdd,
  taskSetTaskStatus,
} from "@/api/operationManagement";
export default {
  data() {
    return {
      loading: false,
      title: "",
      dialogTitle: "新增任务",
      tableData: [{}],
      show: false,
      typeOption: [
        { value: "1", label: "直播时长" },
        { value: "5", label: "观看直播" },
        { value: "10", label: "每天登录" },
        { value: "15", label: "每天关注" },
        { value: "20", label: "每天被关注" },
        { value: "25", label: "每日充值" },
        { value: "30", label: "每日刷钻石" },
        { value: "35", label: "发布动态" },
        { value: "40", label: "动态点赞" },
        { value: "45", label: "刷礼物" },
        { value: "50", label: "主播间发消息条数" },
        { value: "55", label: "分享动态" },
        { value: "60", label: "分享直播间" },
        { value: "65", label: "评论动态" },
      ],
      form: {
        id: "",
        name: "",
        status: "1",
        role_type: "1",
        jump_android: "",
        jump_ios: "",
        type: "1",
        term_num: "",
        reward_type: "1",
        reward_num: "",
        sort: "",
      },
    };
  },
  methods: {
    edit(obj) {
      this.dialogTitle = "修改任务";
      this.form.id = obj.id;
      this.form.name = obj.name;
      this.form.status = obj.status;
      this.form.role_type = obj.roleType;
      this.form.jump_android = obj.jumpAndroid;
      this.form.jump_ios = obj.jumpIos;
      this.form.type = obj.type;
      this.form.term_num = obj.termNum;
      this.form.reward_type = obj.rewardType;
      this.form.reward_num = obj.rewardNum;
      this.form.sort = obj.sort;
      this.show = true;
    },
    async getList() {
      this.loading = true;
      const res = await taskList({
        page: 1,
        pageSize: 1000,
        name: this.title,
        id: "",
        type: "",
        status: "",
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
    add() {
      this.dialogTitle = "新增任务";
      (this.form = {
        id: "",
        name: "",
        status: "1",
        role_type: "1",
        jump_android: "",
        jump_ios: "",
        type: "1",
        term_num: "",
        reward_type: "1",
        reward_num: "",
        sort: "",
      }),
        (this.show = true);
    },
    async submitAdd() {
      console.log(this.form);
      const res = await taskAdd(this.form);
      if (res.code == 0) {
        this.show = false;
        if (this.dialogTitle == "新增任务") {
          this.$message.success("添加成功！");
        } else {
          this.$message.success("编辑成功！");
        }
        this.getList();
      }
    },
    async statusChange(id, status) {
      const res = await taskSetTaskStatus({
        id,
        status,
      });
      if (res.code == 0) {
        this.$message.success("状态更新成功！");
        this.getList();
      }
    },
    del(id, status) {
      this.$confirm("此操作将永久删除该任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await taskSetTaskStatus({
            id,
            status,
          });
          if (res.code == 0) {
            this.$message.success("删除成功！");
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getList();
  },
  filters: {
    type(value) {
      switch (value) {
        case "1":
          return "直播时长";
        case "5":
          return "观看直播";
        case "10":
          return "每天登录";
        case "15":
          return "每天关注";
        case "20":
          return "每天被关注";
        case "25":
          return "每日充值";
        case "30":
          return "每日刷钻石";
        case "35":
          return "发布动态";
        case "40":
          return "动态点赞";
        case "45":
          return "刷礼物";
        case "50":
          return "主播间发消息条数";
        case "55":
          return "分享动态";
        case "60":
          return "分享直播间";
        case "65":
          return "评论动态";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.TaskManagement {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .left {
      display: flex;
      align-items: center;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
}
</style>